<!-- 表格模块 -->
<div class="table-module">
    <div style="display: flex;justify-content: space-between;">
        <div class="module-header">
            <i class="el-icon-tickets"></i>
            <span class="table-title-info">{{abc.bname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{abc.cname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{queryinfo.name1}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{queryinfo.name2}}</span>
        </div>
        <div>
            <!-- 操作按钮组 -->
            <div class="action-buttons">
                <el-button-group>
                    <el-button type="primary" @click="action('add')" icon="el-icon-plus">{{dialogTitle}}</el-button>
                    <el-button type="warning" @click="action('edit')" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" icon="el-icon-download" @click="action('delete')" >删除</el-button>

                </el-button-group>
            </div>
        </div>
    </div>
    <div class="table-container">
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                border
                @selection-change="handleSelectionChangeTable"
        >

            <el-table-column type="selection" label="选择" width="60" align="center"></el-table-column>


            <el-table-column  prop="title" label="标题"  align="center"  >
                <template slot-scope="scope">
                    <div>{{scope.row.title}}</div>
                </template>
            </el-table-column>
            <el-table-column  prop="projectName" label="项目名称"  align="center" :width="100" >
                <template slot-scope="scope">
                    <div>
                        <span style="color:green;font-weight: bold;">{{scope.row.projectName}}</span>
                    </div>
                </template>
            </el-table-column>

            <!-- p路径 -->
            <el-table-column   label="路径"  align="left" :width="400" >
                <template slot-scope="scope">
                    <div>
                        <el-table  :show-header="false"
                                :data="[{'projectPath' : '项目： ' + scope.row.projectPath}]"
                                style="width: 100%"
                                :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                        >
                            <el-table-column  prop="projectName"   align="left"  >
                                <template slot-scope="subScope">
                                    <div>
                                        <span>{{subScope.row.projectPath}}</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-table  :show-header="false"
                                   :data="[{'templatePath' : '模板： ' + scope.row.templatePath}]"
                                   style="width: 100%"
                                   :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                        >
                            <el-table-column  prop="templatePath"   align="left"  >
                                <template slot-scope="subScope">
                                    <div>
                                        <span>{{subScope.row.templatePath}}</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <!-- p路径 -->


            <!-- t路径 -->
            <el-table-column   label="数据库名称"  align="center"  >
                <template slot-scope="scope">
                        <div v-if="scope.row.databaseName">{{scope.row.databaseName.name}}</div>
                </template>
            </el-table-column>
            <!-- t路径 -->

            <!-- t路径 -->
            <el-table-column   label="数据库类型"  align="center"  >
                <template slot-scope="scope">
                    <div v-if="scope.row.databaseName">{{scope.row.databaseName.category}}</div>
                </template>
            </el-table-column>
            <!-- t路径 -->

            <!-- t路径 -->
            <el-table-column   label="部署"  align="center"  >
                <template slot-scope="scope">
                    <div >{{scope.row.deploy}}</div>
                </template>
            </el-table-column>
            <!-- t路径 -->


        </el-table>

        <!-- 分页器 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

    </div>
</div>